<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>11.项目实战-购物车案例</title>
    <script src="data/bookList.js"></script>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 封装组件
      class ShoppingCart extends React.Component {
        constructor() {
          super()
          this.state = {
            list: bookList,
            showRemoveTip: false,
            scopeId: null // 当时正在操作的id
          }
        }

        // 日期展示的过滤器
        getDate(time, index) {
          const formatTime = new Date(time)
          const date = ("0" + formatTime.getDate()).slice(0, 2) // 01 => 011 => slice(0,2)
          const month = ("0" + (formatTime.getMonth() + 1)).slice(0, 2)
          const year = formatTime.getFullYear()
          const dateStr = year + "-" + month + "-" + date
          return dateStr
        }
        // 总价格的过滤器
        totalPrice() {
          const endPrice = this.state.list.reduce(
            (total, item) => total + item.price * item.quantity,
            0
          ) // 尾部一定要传0;
          return endPrice.toFixed(2)
        }

        // 用户确定移除
        onConfirmRemove() {
          const { list, scopeId } = this.state
          const reList = list.filter((item) => scopeId !== item.id)
          console.log(reList, "reList", scopeId)
          this.setState({
            list: reList,
            showRemoveTip: false
          })
          console.log(this.state)
        }
        // 用户取消移除
        onCancelRemove() {
          this.setState({
            showRemoveTip: false,
            scopeId: null
          })
        }

        // 提取共同的添加或删除逻辑
        isSub(id, isAdd) {
          const reList = this.state.list.map((item) => {
            if (id === item.id) {
              if (isAdd) item.quantity++
              else {
                if (item.quantity > 1) item.quantity--
              }
            }
            return item
          })
          this.setState({
            list: reList
          })
        }
        onAdd(id) {
          this.isSub(id, false)
        }

        onSub(id) {
          this.isSub(id, true)
        }

        onRemove(id) {
          this.setState({
            showRemoveTip: true,
            scopeId: id
          })
          console.log(id, this.state.scopeId, "onRemove")
        }

        render() {
          const { list, showRemoveTip } = this.state
          return (
            <div>
              <ol>
                {list.map((item, index) => (
                  <li key={item.id}>
                    <div>
                      <span>{item.name}</span>
                      <span>{this.getDate(item.published_date, index)}</span>
                      <span>￥{item.price}</span>
                      <span>
                        <button
                          onClick={() => {
                            this.onSub(item.id)
                          }}
                        >
                          -
                        </button>
                        <span>{item.quantity}</span>
                        <button
                          onClick={() => {
                            this.onAdd(item.id)
                          }}
                        >
                          +
                        </button>
                      </span>
                      <span>
                        <button
                          onClick={() => {
                            this.onRemove(item.id)
                          }}
                        >
                          移除
                        </button>
                      </span>
                    </div>
                  </li>
                ))}
              </ol>
              <div>总价格：￥{this.totalPrice()}</div>
              {/* 购物车删除某一项时给个确认提示,单例模式 :v-show */}
              <div
                style={{ display: showRemoveTip ? "block" : "none" }}
                className="removeDialog"
              >
                <div className="container">
                  <div className="content">
                    <div>确认要删除?</div>
                    <div>
                      <span
                        onClick={() => {
                          this.onCancelRemove()
                        }}
                      >
                        取消
                      </span>
                      <span
                        onClick={() => {
                          this.onConfirmRemove()
                        }}
                      >
                        确认
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        }
      }

      //  渲染根实例
      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<ShoppingCart />)
    </script>
    <style>
      * {
        margin: 0;
      }

      button {
        cursor: pointer;
      }

      span {
        padding: 0 10px;
      }

      li {
        padding: 10px 0;
      }

      .removeDialog {
        user-select: none;
        position: absolute;
        top: 0;
        height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
      }

      .removeDialog .container {
        position: relative;
        height: 100%;
      }

      .removeDialog .content {
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 100px);
        width: 200px;
        height: 200px;
        line-height: 100px;
        text-align: center;
        background: #ffffff;
      }

      .removeDialog .content span {
        border: 1px solid;
        cursor: pointer;
      }

      .removeDialog .content span {
        margin-left: 10px;
      }
    </style>
  </body>
</html>
